<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考研写作单词拼写学习工具</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 15px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 25px;
            position: relative;
            overflow: hidden;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
        }
        
        .header::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            margin: 12px auto;
            border-radius: 2px;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 28px;
            font-weight: 600;
        }
        
        .description {
            color: #7f8c8d;
            margin-bottom: 20px;
            font-size: 15px;
            line-height: 1.5;
        }
        
        .list-selector {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 10px;
            flex-wrap: wrap;
            max-height: 200px;
            overflow-y: auto;
            padding: 5px;
        }
        
        .list-btn {
            padding: 10px 16px;
            background: linear-gradient(90deg, #9b59b6, #8e44ad);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            min-width: 100px;
            white-space: nowrap;
        }
        
        .list-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
        }
        
        .list-btn.active {
            background: linear-gradient(90deg, #3498db, #2980b9);
        }
        
        /* 添加下拉选择器样式 */
        .list-selector-select {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            background: linear-gradient(90deg, #9b59b6, #8e44ad);
            color: white;
            cursor: pointer;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            display: none; /* 默认隐藏 */
        }
        
        /* 修复下拉选项文字显示问题 */
        .list-selector-select option {
            color: #333;
            background: white;
        }
        
        .progress-container {
            background-color: #ecf0f1;
            border-radius: 10px;
            padding: 18px;
            margin-bottom: 25px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
        }
        
        /* 优化进度统计显示，采用紧凑的横向布局 */
        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        /* 在移动端使用更紧凑的单行布局 */
        @media (max-width: 768px) {
            .stats {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding: 5px 0;
                margin-bottom: 10px;
            }
            
            .stat-item {
                flex: none;
                min-width: 120px;
                text-align: center;
                padding: 8px 5px;
            }
            
            /* 移动端显示下拉框，隐藏按钮组 */
            .list-selector-select {
                display: block;
            }
            
            .list-btn {
                display: none;
            }
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
            min-width: 80px;
            padding: 8px;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #3498db;
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 13px;
            color: #7f8c8d;
        }
        
        .progress-bar {
            height: 10px;
            background-color: #ddd;
            border-radius: 5px;
            overflow: hidden;
            margin-top: 8px;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, #2ecc71, #27ae60);
            width: 0%;
            transition: width 0.5s ease;
            border-radius: 5px;
        }
        
        .learning-area {
            margin-bottom: 25px;
            text-align: center;
        }
        
        .word-hint {
            font-size: 20px;
            margin-bottom: 18px;
            color: #2c3e50;
            font-weight: bold;
            min-height: 32px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            line-height: 1.4;
        }
        
        .input-container {
            display: flex;
            margin-bottom: 18px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        #word-input {
            flex: 1;
            padding: 12px 16px;
            border: none;
            font-size: 16px;
            background: #fff;
        }
        
        #word-input:focus {
            outline: none;
            background: #f8f9fa;
        }
        
        #check-btn {
            padding: 12px 20px;
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        #check-btn:hover {
            background: linear-gradient(90deg, #2980b9, #256a9e);
        }
        
        .feedback {
            text-align: center;
            min-height: 28px;
            margin-bottom: 18px;
            font-weight: bold;
            font-size: 16px;
            padding: 8px;
            border-radius: 8px;
            line-height: 1.4;
        }
        
        .correct {
            color: #27ae60;
            background-color: rgba(39, 174, 96, 0.1);
        }
        
        .incorrect {
            color: #e74c3c;
            background-color: rgba(231, 76, 60, 0.1);
        }
        
        /* 优化控制按钮布局，在移动端使用3列布局 */
        .controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 25px;
        }
        
        .control-btn {
            padding: 10px;
            background: linear-gradient(90deg, #9b59b6, #8e44ad);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }
        
        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
        }
        
        .control-btn:active {
            transform: translateY(0);
        }
        
        /* 重置按钮跨3列 */
        #reset-btn {
            background: linear-gradient(90deg, #e74c3c, #c0392b);
            grid-column: span 3;
        }
        
        .word-list-container {
            margin-bottom: 20px;
        }
        
        .word-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .word-list-title {
            font-size: 16px;
            color: #2c3e50;
            font-weight: bold;
        }
        
        .toggle-list-btn {
            background: #95a5a6;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 6px 12px;
            cursor: pointer;
            font-size: 13px;
        }
        
        .word-list {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 8px;
            background: #f8f9fa;
            display: none;
        }
        
        .word-list.show {
            display: block;
        }
        
        .word-list-item {
            padding: 8px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            transition: background 0.3s;
            font-size: 14px;
            cursor: pointer;
        }
        
        .word-list-item:hover {
            background: rgba(52, 152, 219, 0.1);
        }
        
        .word-list-item:last-child {
            border-bottom: none;
        }
        
        .mastered {
            color: #27ae60;
            font-weight: bold;
        }
        
        .learning {
            color: #3498db;
        }
        
        .footer {
            text-align: center;
            margin-top: 25px;
            color: #7f8c8d;
            font-size: 13px;
            padding-top: 15px;
            border-top: 1px solid #ecf0f1;
        }
        
        .multiple-answers-note {
            font-size: 12px;
            color: #7f8c8d;
            margin-top: 5px;
            display: block;
        }
        
        .category-badge {
            display: inline-block;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 11px;
            margin-left: 8px;
            background: #3498db;
            color: white;
        }
        
        .loading-indicator {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 16px;
        }
        
        .error-message {
            color: #e74c3c;
            text-align: center;
            padding: 15px;
            background: rgba(231, 76, 60, 0.1);
            border-radius: 8px;
            margin: 10px 0;
        }
        
        .no-data-message {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-style: italic;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
                margin: 10px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            .list-selector {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .controls {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }
            
            .control-btn {
                padding: 8px;
                font-size: 13px;
            }
            
            .word-hint {
                font-size: 18px;
                padding: 10px;
            }
            
            #word-input {
                font-size: 15px;
                padding: 10px 12px;
            }
            
            #check-btn {
                padding: 10px 15px;
                font-size: 14px;
            }
            
            .feedback {
                font-size: 15px;
                padding: 8px;
            }
            
            .word-list-item {
                font-size: 13px;
                padding: 6px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .container {
                margin: 5px;
                padding: 12px;
            }
            
            h1 {
                font-size: 22px;
            }
            
            /* 在小屏幕上进一步优化统计信息布局 */
            .stat-item {
                min-width: 100px;
                padding: 6px 4px;
            }
            
            .stat-number {
                font-size: 20px;
            }
            
            .stat-label {
                font-size: 11px;
            }
            
            .progress-bar {
                height: 8px;
            }
        }
        
        /* 加载动画 */
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        .loading-dot {
            display: inline-block;
            animation: pulse 1.5s infinite;
        }
        
        .loading-dot:nth-child(2) { animation-delay: 0.2s; }
        .loading-dot:nth-child(3) { animation-delay: 0.4s; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>考研写作单词拼写学习工具</h1>
            <p class="description">掌握考研写作必备单词，提升写作水平。</p>
        </div>
        
        <div class="list-selector" id="dynamic-list-selector">
            <div class="loading-indicator">
                正在加载单词列表<span class="loading-dot">.</span><span class="loading-dot">.</span><span class="loading-dot">.</span>
            </div>
        </div>
        
        <div class="progress-container">
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number" id="total-words">0</div>
                    <div class="stat-label">总单词数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="learned-words">0</div>
                    <div class="stat-label">已学单词</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="mastered-words">0</div>
                    <div class="stat-label">已掌握</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="current-position">0/0</div>
                    <div class="stat-label">当前进度</div>
                </div>
            </div>
            <div class="progress-bar">
                <div class="progress" id="progress-bar"></div>
            </div>
        </div>
        
        <div class="learning-area">
            <div class="word-hint" id="word-hint">正在加载单词列表...</div>
            <div class="input-container">
                <input type="text" id="word-input" placeholder="请输入英文单词..." autocomplete="off" disabled>
                <button id="check-btn" disabled>检查</button>
            </div>
            <div class="feedback" id="feedback"></div>
        </div>
        
        <div class="controls">
            <button class="control-btn" id="prev-btn" disabled>上一个</button>
            <button class="control-btn" id="next-btn" disabled>下一个</button>
            <button class="control-btn" id="show-answer-btn" disabled>显示答案</button>
            <button class="control-btn" id="hint-btn" disabled>提示首字母</button>
            <button class="control-btn" id="random-btn" disabled>随机单词</button>
            <button class="control-btn" id="reset-btn">重置进度</button>
        </div>
        
        <div class="word-list-container">
            <div class="word-list-header">
                <div class="word-list-title">单词列表</div>
                <button class="toggle-list-btn" id="toggle-list-btn">显示列表</button>
            </div>
            <div class="word-list" id="word-list">
                <div class="loading-indicator">加载中...</div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2025 Luwei 考研单词学习工具 | <a href="https://sufine.top">Suffine Hub</a></p>
        </div>
    </div>

    <script>
        // 应用状态
        let currentList = null;
        let currentWordIndex = 0;
        let learnedWords = 0;
        let masteredWords = 0;
        let wordStatus = {};
        let wordLists = {}; // 从外部文件加载的单词数据
        let availableLists = []; // 可用的单词列表
        let isLoading = false;

        // DOM元素
        const wordHintElement = document.getElementById('word-hint');
        const wordInputElement = document.getElementById('word-input');
        const checkButton = document.getElementById('check-btn');
        const feedbackElement = document.getElementById('feedback');
        const prevButton = document.getElementById('prev-btn');
        const nextButton = document.getElementById('next-btn');
        const showAnswerButton = document.getElementById('show-answer-btn');
        const hintButton = document.getElementById('hint-btn');
        const randomButton = document.getElementById('random-btn');
        const resetButton = document.getElementById('reset-btn');
        const toggleListButton = document.getElementById('toggle-list-btn');
        const listSelectorElement = document.getElementById('dynamic-list-selector');
        const totalWordsElement = document.getElementById('total-words');
        const learnedWordsElement = document.getElementById('learned-words');
        const masteredWordsElement = document.getElementById('mastered-words');
        const currentPositionElement = document.getElementById('current-position');
        const progressBarElement = document.getElementById('progress-bar');
        const wordListElement = document.getElementById('word-list');

        // 初始化应用
        async function initApp() {
            try {
                // 从localStorage加载进度
                loadProgress();
                
                // 自动发现并加载所有单词列表
                await discoverAndLoadWordLists();
                
                // 如果有可用列表，加载第一个列表
                if (availableLists.length > 0) {
                    currentList = availableLists[0].id;
                    loadWordList(currentList);
                } else {
                    wordHintElement.textContent = '暂无可用的单词列表';
                    wordInputElement.disabled = true;
                    checkButton.disabled = true;
                }
                
                // 添加事件监听器
                setupEventListeners();
                
            } catch (error) {
                console.error('初始化应用失败:', error);
                wordHintElement.innerHTML = `<div class="error-message">加载单词数据失败，请检查网络连接或数据文件</div>`;
            }
        }

        // 自动发现并加载所有单词列表
        async function discoverAndLoadWordLists() {
            // 基础的预定义文件列表（保持向后兼容）
            const baseFiles = ['general.json', 'chart.json', 'core.json', 'test.json'];
            
            // 尝试加载基础文件
            for (const file of baseFiles) {
                await loadWordListFromFile(file);
            }
            
            // 更新列表选择器
            updateListSelector();
        }

        // 从文件加载单词列表
        async function loadWordListFromFile(filename) {
            try {
                const response = await fetch(filename);
                if (!response.ok) {
                    throw new Error(`无法加载 ${filename}: ${response.status}`);
                }
                const data = await response.json();
                
                // 从数据中获取列表ID和名称，如果没有则使用文件名
                const listId = data.id || filename.split('.')[0];
                const listName = data.name || data.title || filename.split('.')[0];
                const words = data.words || data;
                
                // 存储列表数据
                wordLists[listId] = {
                    name: listName,
                    words: words
                };
                
                // 添加到可用列表
                if (!availableLists.some(list => list.id === listId)) {
                    availableLists.push({
                        id: listId,
                        name: listName,
                        filename: filename
                    });
                }
                
                // 如果是首次加载，初始化状态
                if (!wordStatus[listId]) {
                    wordStatus[listId] = Array(words.length).fill(0);
                }
                
                console.log(`成功加载单词列表: ${listName} (${listId})`);
                
            } catch (error) {
                console.warn(`加载 ${filename} 失败:`, error);
                // 继续加载其他文件，不中断
            }
        }

        // 设置事件监听器
        function setupEventListeners() {
            checkButton.addEventListener('click', checkSpelling);
            prevButton.addEventListener('click', showPreviousWord);
            nextButton.addEventListener('click', showNextWord);
            showAnswerButton.addEventListener('click', showAnswer);
            hintButton.addEventListener('click', showHint);
            randomButton.addEventListener('click', showRandomWord);
            resetButton.addEventListener('click', resetProgress);
            toggleListButton.addEventListener('click', toggleWordList);
            wordInputElement.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    checkSpelling();
                }
            });
            
            // 监听窗口大小变化，更新列表选择器
            window.addEventListener('resize', updateListSelector);
        }

        // 更新列表选择器
        function updateListSelector() {
            listSelectorElement.innerHTML = '';
            
            if (availableLists.length === 0) {
                listSelectorElement.innerHTML = '<div class="no-data-message">暂无可用的单词列表</div>';
                return;
            }
            
            // 创建下拉选择器
            const selectElement = document.createElement('select');
            selectElement.className = 'list-selector-select';
            selectElement.id = 'list-select';
            
            // 添加下拉选项
            availableLists.forEach(list => {
                const option = document.createElement('option');
                option.value = list.id;
                option.textContent = list.name;
                
                if (list.id === currentList) {
                    option.selected = true;
                }
                
                selectElement.appendChild(option);
            });
            
            // 添加下拉选择事件
            selectElement.addEventListener('change', function() {
                switchWordList(this.value);
            });
            
            // 添加下拉选择器到容器
            listSelectorElement.appendChild(selectElement);
            
            // 创建按钮列表（桌面端使用）
            availableLists.forEach(list => {
                const btn = document.createElement('button');
                btn.className = 'list-btn';
                btn.textContent = list.name;
                btn.dataset.list = list.id;
                
                if (list.id === currentList) {
                    btn.classList.add('active');
                }
                
                btn.addEventListener('click', () => {
                    switchWordList(list.id);
                });
                
                listSelectorElement.appendChild(btn);
            });
        }

        // 切换单词列表
        function switchWordList(listId) {
            currentList = listId;
            
            // 更新按钮状态
            const buttons = document.querySelectorAll('.list-btn');
            buttons.forEach(btn => {
                if (btn.dataset.list === listId) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
            
            // 更新下拉选择器状态
            const selectElement = document.getElementById('list-select');
            if (selectElement) {
                selectElement.value = listId;
            }
            
            // 加载新列表
            loadWordList(listId);
            saveProgress();
        }

        // 加载单词列表
        function loadWordList(listId) {
            if (!wordLists[listId] || !wordLists[listId].words) {
                wordHintElement.textContent = `单词列表 "${listId}" 不存在或数据无效`;
                disableControls();
                return;
            }
            
            const currentWordList = wordLists[listId].words;
            
            // 确保状态数组存在
            if (!wordStatus[listId]) {
                wordStatus[listId] = Array(currentWordList.length).fill(0);
            }
            
            // 重置当前索引
            currentWordIndex = 0;
            
            // 更新界面
            updateStats();
            renderWordList();
            showCurrentWord();
            
            // 启用控件
            enableControls();
        }

        // 禁用控件
        function disableControls() {
            wordInputElement.disabled = true;
            checkButton.disabled = true;
            prevButton.disabled = true;
            nextButton.disabled = true;
            showAnswerButton.disabled = true;
            hintButton.disabled = true;
            randomButton.disabled = true;
        }

        // 启用控件
        function enableControls() {
            const currentWordList = wordLists[currentList].words;
            const hasWords = currentWordList && currentWordList.length > 0;
            
            wordInputElement.disabled = !hasWords;
            checkButton.disabled = !hasWords;
            prevButton.disabled = !hasWords || currentWordList.length <= 1;
            nextButton.disabled = !hasWords || currentWordList.length <= 1;
            showAnswerButton.disabled = !hasWords;
            hintButton.disabled = !hasWords;
            randomButton.disabled = !hasWords || currentWordList.length <= 1;
        }

        // 显示当前单词
        function showCurrentWord() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList || currentWordList.length === 0) return;
            
            const word = currentWordList[currentWordIndex];
            wordHintElement.textContent = word.chinese || word.meaning || '未知单词';
            
            // 检查是否有多个答案
            if (word.english && word.english.includes(',')) {
                wordHintElement.innerHTML = (word.chinese || word.meaning || '未知单词') + 
                    '<div class="multiple-answers-note">（多个正确答案，输入任意一个即可）</div>';
            }
            
            wordInputElement.value = '';
            feedbackElement.textContent = '';
            feedbackElement.className = 'feedback';
            wordInputElement.focus();
            updateCurrentPosition();
        }

        // 更新当前位置显示
        function updateCurrentPosition() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList) {
                currentPositionElement.textContent = '0/0';
                return;
            }
            
            currentPositionElement.textContent = `${currentWordIndex + 1}/${currentWordList.length}`;
        }

        // 检查拼写
        function checkSpelling() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList || currentWordList.length === 0) return;
            
            const userInput = wordInputElement.value.trim();
            const correctAnswers = currentWordList[currentWordIndex].english.split(',').map(a => a.trim());
            
            // 检查用户输入是否匹配任何一个正确答案（不区分大小写）
            const isCorrect = correctAnswers.some(answer => 
                userInput.toLowerCase() === answer.toLowerCase()
            );
            
            if (isCorrect) {
                feedbackElement.textContent = '正确!';
                feedbackElement.className = 'feedback correct';
                wordStatus[currentList][currentWordIndex] = 2; // 标记为已掌握
                updateStats();
                saveProgress();
                renderWordList();
                
                // 2秒后自动显示下一个单词
                setTimeout(showNextWord, 2000);
            } else {
                feedbackElement.textContent = `不正确! 正确答案: ${correctAnswers.join(' 或 ')}`;
                feedbackElement.className = 'feedback incorrect';
                wordStatus[currentList][currentWordIndex] = 1; // 标记为已学习但未掌握
                updateStats();
                saveProgress();
                renderWordList();
            }
        }

        // 显示答案
        function showAnswer() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList || currentWordList.length === 0) return;
            
            const correctAnswers = currentWordList[currentWordIndex].english.split(',').map(a => a.trim());
            feedbackElement.textContent = `正确答案: ${correctAnswers.join(' 或 ')}`;
            feedbackElement.className = 'feedback';
            wordStatus[currentList][currentWordIndex] = 1; // 标记为已学习
            updateStats();
            saveProgress();
            renderWordList();
        }

        // 显示提示（首字母）
        function showHint() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList || currentWordList.length === 0) return;
            
            const correctAnswers = currentWordList[currentWordIndex].english.split(',').map(a => a.trim());
            const firstLetters = correctAnswers.map(a => a.charAt(0));
            feedbackElement.textContent = `提示: 首字母是 "${firstLetters.join('" 或 "')}"`;
            feedbackElement.className = 'feedback';
        }

        // 显示上一个单词
        function showPreviousWord() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList || currentWordList.length === 0) return;
            
            currentWordIndex = (currentWordIndex - 1 + currentWordList.length) % currentWordList.length;
            showCurrentWord();
            saveProgress();
        }

        // 显示下一个单词
        function showNextWord() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList || currentWordList.length === 0) return;
            
            currentWordIndex = (currentWordIndex + 1) % currentWordList.length;
            showCurrentWord();
            saveProgress();
        }

        // 显示随机单词
        function showRandomWord() {
            const currentWordList = wordLists[currentList].words;
            if (!currentWordList || currentWordList.length === 0) return;
            
            const randomIndex = Math.floor(Math.random() * currentWordList.length);
            currentWordIndex = randomIndex;
            showCurrentWord();
            saveProgress();
        }

        // 更新统计信息
        function updateStats() {
            const currentWordList = wordLists[currentList] ? wordLists[currentList].words : [];
            
            totalWordsElement.textContent = currentWordList.length;
            
            learnedWords = wordStatus[currentList] ? 
                wordStatus[currentList].filter(status => status > 0).length : 0;
            learnedWordsElement.textContent = learnedWords;
            
            masteredWords = wordStatus[currentList] ? 
                wordStatus[currentList].filter(status => status === 2).length : 0;
            masteredWordsElement.textContent = masteredWords;
            
            const progressPercentage = currentWordList.length > 0 ? 
                (learnedWords / currentWordList.length) * 100 : 0;
            progressBarElement.style.width = `${progressPercentage}%`;
        }

        // 保存进度到localStorage
        function saveProgress() {
            const progress = {
                currentList: currentList,
                wordStatus: wordStatus
            };
            localStorage.setItem('wordLearningProgress', JSON.stringify(progress));
        }

        // 从localStorage加载进度
        function loadProgress() {
            const savedProgress = localStorage.getItem('wordLearningProgress');
            
            if (savedProgress) {
                try {
                    const progress = JSON.parse(savedProgress);
                    currentList = progress.currentList || null;
                    wordStatus = progress.wordStatus || {};
                } catch (error) {
                    console.error('解析保存的进度失败:', error);
                    wordStatus = {};
                }
            } else {
                wordStatus = {};
            }
        }

        // 重置进度
        function resetProgress() {
            if (!currentList || !wordLists[currentList]) return;
            
            if (confirm('确定要重置当前列表的学习进度吗？')) {
                const currentWordList = wordLists[currentList].words;
                if (currentWordList) {
                    wordStatus[currentList] = Array(currentWordList.length).fill(0);
                    currentWordIndex = 0;
                    updateStats();
                    saveProgress();
                    renderWordList();
                    showCurrentWord();
                }
            }
        }

        // 切换单词列表显示
        function toggleWordList() {
            wordListElement.classList.toggle('show');
            toggleListButton.textContent = wordListElement.classList.contains('show') ? '隐藏列表' : '显示列表';
        }

        // 渲染单词列表
        function renderWordList() {
            wordListElement.innerHTML = '';
            
            if (!currentList || !wordLists[currentList] || !wordLists[currentList].words) {
                wordListElement.innerHTML = '<div class="no-data-message">暂无单词数据</div>';
                return;
            }
            
            const currentWordList = wordLists[currentList].words;
            
            currentWordList.forEach((word, index) => {
                const item = document.createElement('div');
                item.className = 'word-list-item';
                
                if (wordStatus[currentList] && wordStatus[currentList][index] === 2) {
                    item.classList.add('mastered');
                } else if (wordStatus[currentList] && wordStatus[currentList][index] === 1) {
                    item.classList.add('learning');
                }
                
                if (index === currentWordIndex) {
                    item.style.background = 'rgba(52, 152, 219, 0.2)';
                }
                
                // 处理多个答案的显示
                const englishDisplay = word.english && word.english.includes(',') ? 
                    word.english.split(',').map(a => a.trim()).join(' / ') : 
                    (word.english || '');
                
                const chineseDisplay = word.chinese || word.meaning || '未知单词';
                
                item.innerHTML = `
                    <span>${chineseDisplay}</span>
                    <span>${englishDisplay}</span>
                `;
                
                item.addEventListener('click', () => {
                    currentWordIndex = index;
                    showCurrentWord();
                    saveProgress();
                    wordListElement.classList.remove('show');
                    toggleListButton.textContent = '显示列表';
                });
                
                wordListElement.appendChild(item);
            });
        }

        // 页面加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>